<template>
  <!-- 用户页面根组件 -->
  <div>
    <el-container style="height: 100%">
      <el-aside width="auto" ref="aside">
        <Aside
          @posttitle="gettitle"
          :isCollapse="isCollapse"
          :user_id="user.id"
          :list="list"
        ></Aside>
      </el-aside>

      <el-container style="height: 100%;width=auto">
        <el-header ref="header" style="height: 100px">
          <Header
            :title="title"
            :username="user.userName"
            @postcollapse="getcollapse"
          ></Header>
        </el-header>
        <el-main ref="main">
          <!-- <keep-alive> -->
          <el-backtop></el-backtop>
          <router-view></router-view>
          <!-- </keep-alive> -->
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Aside from "@/components/Aside.vue";
import Header from "@/components/Header.vue";
export default {
  components: {
    Aside,
    Header,
  },

  data() {
    return {
      // 顶部栏标题
      title: "首页",
      // 用户对象
      user: {
        user_id: 1,
        user_name: "光之半径世子",
      },
      // 侧边栏是否折叠
      isCollapse: false,
      // 类型

      //   侧边栏数据,包括名称、路由、图标
      list: [
        { name: "用户首页", url: "main", icon: "Cpu" },
        { name: "药品管理", url: "drug", icon: "DataAnalysis" },
        { name: "门诊发药", url: "dispensing", icon: "DocumentRemove" },
        { name: "门诊退药", url: "regression", icon: "Film" },
      ],
    };
  },
  methods: {
    gettitle(val) {
      this.title = val;
    },

    getcollapse(val) {
      this.isCollapse = val;
    },
  },

  watch: {
    // 控制侧边栏是否折叠
    isCollapse() {
      if (this.isCollapse) {
        this.$refs.main.$el.style.marginLeft = "65px";
        this.$refs.header.$el.style.marginLeft = "65px";
      } else {
        this.$refs.main.$el.style.marginLeft = "200px";
        this.$refs.header.$el.style.marginLeft = "200px";
      }
    },
  },
  created() {
    // 发axios请求最早的时候，调用普通函数来发请求
    this.user = JSON.parse(window.sessionStorage.getItem("userInfo"));
  },
  mounted() {
    // 获取$ref最早的时候
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #c1e4e2;
  /* text-align: right; */
  /* line-height: 100px; */
  margin-left: 200px;
  height: 100px;
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
  z-index: 900;
}
.el-aside {
  float: left;
  position: fixed;
  box-shadow: none;
  border: none;
  outline: none;
  top: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  z-index: 999;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  height: 100%;
  margin-top: 90px;
  margin-left: 195px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>
